<template>
  <h1 class="row-title">普通引入</h1>
  <div class="row">
    <Dong-Icon icon="user-secret" />
    <Dong-Icon icon="bars" />
    <Dong-Icon icon="shield-halved" />
    <Dong-Icon icon="file" />
    <Dong-Icon icon="filter" />
    <Dong-Icon icon="gear" />
    <Dong-Icon icon="barcode" />
    <Dong-Icon icon="folder" />
    <Dong-Icon icon="folder-open" />
  </div>
  <h1 class="row-title">设置不同的大小</h1>
  <div class="row">
    <Dong-Icon icon="user-secret" size="2xs" />
    <Dong-Icon icon="bars" size="xs" />
    <Dong-Icon icon="shield-halved" size="sm" />
    <Dong-Icon icon="file" size="lg" />
    <Dong-Icon icon="filter" size="xl" />
    <Dong-Icon icon="gear" size="2xl" />
    <Dong-Icon icon="barcode" size="2x" />
    <Dong-Icon icon="folder" size="3x" />
    <Dong-Icon icon="folder-open" size="4x" />
  </div>
  <h1 class="row-title">旋转与翻转</h1>
  <div class="row">
    <Dong-Icon icon="user-secret" rotation="90" size="xl" />
    <Dong-Icon icon="bars" rotation="270" size="xl" />
    <Dong-Icon icon="shield-halved" rotation="180" size="xl" />
    <Dong-Icon icon="file" flip="horizontal" size="xl" />
    <Dong-Icon icon="filter" flip="vertical" size="xl" />
    <Dong-Icon icon="folder-open" flip="both" size="xl" />
  </div>
  <h1 class="row-title">动画效果</h1>
  <div class="row">
    <Dong-Icon icon="user-secret" size="xl" beat />
    <Dong-Icon icon="bars" size="xl" beat-fade />
    <Dong-Icon icon="shield-halved" size="xl" bounce />
    <Dong-Icon icon="file" size="xl" fade />
    <Dong-Icon icon="filter" size="xl" flip />
    <Dong-Icon icon="gear" size="xl" shake />
    <Dong-Icon icon="barcode" size="xl" spin />
    <Dong-Icon icon="folder" size="xl" spin spin-reverse />
    <Dong-Icon icon="folder-open" size="xl" spin-pulse />
  </div>
  <h1 class="row-title">添加自定义属性</h1>
  <div class="row">
    <Dong-Icon icon="user-secret" size="xl" type="primary" />
    <Dong-Icon icon="bars" size="xl" type="success" />
    <Dong-Icon icon="shield-halved" size="xl" type="info" />
    <Dong-Icon icon="file" size="xl" type="warning" />
    <Dong-Icon icon="filter" size="xl" type="danger" />
    <Dong-Icon icon="gear" size="xl" color="#e47412" />
    <Dong-Icon icon="barcode" size="xl" color="#7ec102" />
    <Dong-Icon icon="folder" size="xl" color="skyblue" />
    <Dong-Icon icon="folder-open" size="xl" color="rgba(122, 122, 122, .5)" />
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped></style>
